<template>
  <div class="score-detail-container" style="width: 80%; margin: 0 auto;">
    <!-- 试卷信息 -->
    <div class="paper-info">
      <h1>{{ scoreDetail.examinationName }}</h1>
      <div class="paper-meta">
        <div class="meta-item">
          <span class="label">科目：</span>
          <span class="value">{{ scoreDetail.subjectName }}</span>
        </div>
        <div class="meta-item">
          <span class="label">考试时间：</span>
          <span class="value">{{ formatDate(scoreDetail.examTime) }}</span>
        </div>
        <div class="meta-item">
          <span class="label">总分：</span>
          <span class="value">{{ scoreDetail.totalScore }}</span>
        </div>
        <div class="meta-item">
          <span class="label">得分：</span>
          <span class="value score" :class="getScoreClass(scoreDetail.score, scoreDetail.totalScore)">
            {{ scoreDetail.score }}
          </span>
        </div>
      </div>
    </div>

    <!-- 成绩详情 -->
    <div class="score-content" style=" margin: 0 auto;">
      <el-tabs type="card">
        <el-tab-pane label="答题情况">
          <div v-for="(bigQuestion, bIndex) in scoreDetail.bigQuestions" :key="`bq-${bIndex}`"
            class="big-question-section">
            <div class="big-question-header">
              <h3>{{ bIndex + 1 }}. {{ bigQuestion.name }}</h3>
              <div class="big-question-score">
                得分：<span>{{ getBigQuestionScore(bigQuestion) }}/{{ getBigQuestionTotalScore(bigQuestion)
                }}</span>
              </div>
            </div>

            <div class="questions-list">
              <div v-for="(question, qIndex) in bigQuestion.questions" :key="`q-${question.id}`" class="question-item">
                <div class="question-header">
                  <div class="question-title">
                    {{ bIndex + 1 }}-{{ qIndex + 1 }} {{ question.name }}
                    <span class="question-score">({{ question.score }}分)</span>
                  </div>
                  <div class="question-result">
                    <el-tag :type="question.finalScore === question.score ? 'success' : 'danger'">
                      {{ question.finalScore || 0 }}/{{ question.score }}
                    </el-tag>
                  </div>
                </div>

                <div class="question-content" v-html="renderQuestionContent(question)"></div>

                <!-- 答案区域 -->
                <div class="answer-section">
                  <!-- 选择题选项 -->
                  <template v-if="question.questionTypeId === 1 || question.questionTypeId === 2">
                    <div v-for="(option, key) in parseOptions(question.questionContent)" :key="key" class="option-item"
                      :class="{
                        'correct': isCorrectOption(question, key),
                        'wrong': isWrongOption(question, key),
                        'selected': isSelectedOption(question, key)
                      }">
                      {{ key }}: {{ option }}
                      <el-icon v-if="isCorrectOption(question, key)" class="icon-right">
                        <Check />
                      </el-icon>
                      <el-icon v-if="isWrongOption(question, key)" class="icon-wrong">
                        <Close />
                      </el-icon>
                    </div>
                  </template>

                  <!-- 填空题答案 -->
                  <!-- -if="question.questionTypeId === 3" -->
                  <template v-else>
                    <div class="subjective-answer">
                      <div class="answer-row">
                        <div class="answer-label">你的答案：</div>
                        <div class="answer-content" :class="{ 'correct': question.finalScore === question.score }">
                          {{ question.studentAnswer || '未作答' }}
                        </div>
                      </div>

                      <div class="answer-row">
                        <div class="answer-label">参考答案：</div>
                        <div class="answer-content correct">{{ getCorrectAnswer(question) }}
                        </div>
                      </div>

                      <div v-if="question.checkDetail" class="answer-row">
                        <div class="answer-label">批改意见：</div>
                        <div class="answer-content check-detail">{{ question.checkDetail }}
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="成绩分析">
          <div class="score-analysis">
            <div class="analysis-charts">
              <div class="chart-container">
                <!-- <h3>得分分布</h3> -->
                <div ref="scoreDistributionChart" class="chart"></div>
              </div>

              <div class="chart-container">
                <!-- <h3>答题正确率</h3> -->
                <div ref="correctRateChart" class="chart"></div>
              </div>
            </div>

            <div class="analysis-detail">
              <h3>考试统计</h3>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="总题数">{{ getTotalQuestionCount() }}</el-descriptions-item>
                <el-descriptions-item label="答对题数">{{ getCorrectQuestionCount()
                }}</el-descriptions-item>
                <el-descriptions-item label="答错题数">{{ getWrongQuestionCount() }}</el-descriptions-item>
                <el-descriptions-item label="未答题数">{{ getUnansweredQuestionCount()
                }}</el-descriptions-item>
                <el-descriptions-item label="客观题得分率">{{ getObjectiveScoreRate()
                }}%</el-descriptions-item>
                <el-descriptions-item label="主观题得分率">{{ getSubjectiveScoreRate()
                }}%</el-descriptions-item>
                <el-descriptions-item label="总得分率">{{ getTotalScoreRate() }}%</el-descriptions-item>
                <el-descriptions-item label="排名">{{ scoreDetail.rank || 'N/A' }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>


    <!-- 底部操作区 -->
    <div class="score-actions">
      <el-button @click="goBack">返回列表</el-button>
      <el-button type="primary" @click="printScore">导出成绩单</el-button>
    </div>
  </div>


  <!-- 添加一个隐藏的打印模板 style="display: none;"-->
  <div id="pdf-content" style="display: none;">
    <div class="pdf-container">
      <!-- PDF 标题 -->
      <div class="pdf-header">
        <h1>{{ scoreDetail.examinationName }}</h1>
        <div class="student-info">
          <div class="info-row">
            <span>姓名：{{ studentInfo.name }}</span>
            <span>学号：{{ studentInfo.account }}</span>
            <span>班级：{{ studentInfo.classInfo.name }}</span>
          </div>
          <div class="info-row">
            <span>考试时间：{{ formatDate(scoreDetail.examTime) }}</span>
            <span>总分：{{ scoreDetail.score }}/{{ scoreDetail.totalScore }}</span>
          </div>
        </div>
      </div>

      <!-- 成绩分析部分 -->
      <div class="pdf-section">
        <h2>成绩分析</h2>
        <div class="analysis-stats">
          <div class="stat-row">
            <div class="score-analysis">
              <div class="analysis-charts">
                <div class="chart-container">
                  <!-- <h3>得分分布</h3> -->
                  <div ref="pdfScoreDistributionChart" class="chart"></div>
                </div>

                <div class="chart-container">
                  <!-- <h3>答题正确率</h3> -->
                  <div ref="pdfCorrectRateChart" class="chart"></div>
                </div>
              </div>

              <div class="analysis-detail">
                <h3>考试统计</h3>
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="总题数">{{ getTotalQuestionCount() }}</el-descriptions-item>
                  <el-descriptions-item label="答对题数">{{ getCorrectQuestionCount()
                  }}</el-descriptions-item>
                  <el-descriptions-item label="答错题数">{{ getWrongQuestionCount() }}</el-descriptions-item>
                  <el-descriptions-item label="未答题数">{{ getUnansweredQuestionCount()
                  }}</el-descriptions-item>
                  <el-descriptions-item label="客观题得分率">{{ getObjectiveScoreRate()
                  }}%</el-descriptions-item>
                  <el-descriptions-item label="主观题得分率">{{ getSubjectiveScoreRate()
                  }}%</el-descriptions-item>
                  <el-descriptions-item label="总得分率">{{ getTotalScoreRate() }}%</el-descriptions-item>
                  <el-descriptions-item label="排名">{{ scoreDetail.rank || 'N/A' }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 答题情况部分 -->
      <div class="pdf-section">
        <h2>答题情况</h2>
        <div v-for="(bigQuestion, bIndex) in scoreDetail.bigQuestions" :key="bIndex" class="big-question">
          <h3>{{ bIndex + 1 }}. {{ bigQuestion.name }}
            <span class="score">({{ getBigQuestionScore(bigQuestion) }}/{{ getBigQuestionTotalScore(bigQuestion)
            }})</span>
          </h3>

          <div v-for="(question, qIndex) in bigQuestion.questions" :key="qIndex" class="question">
            <div class="question-header">
              <span class="question-title">{{ bIndex + 1 }}-{{ qIndex + 1 }} {{ question.name }}</span>
              <span class="question-score"
                :style="{ color: question.finalScore === question.score ? '#67C23A' : '#F56C6C' }">
                ({{ question.finalScore || 0 }}/{{ question.score }}分)
              </span>
            </div>

            <!-- 选择题 -->
            <div v-if="question.questionTypeId === 1 || question.questionTypeId === 2" class="options">
              <div v-for="(option, key) in parseOptions(question.questionContent)" :key="key" class="option" :class="{
                'correct': isCorrectOption(question, key),
                'wrong': isWrongOption(question, key),
                'selected': isSelectedOption(question, key)
              }">
                {{ key }}: {{ option }}
              </div>
            </div>

            <!-- 其他题型 -->
            <div v-else class="answer-section">
              <div class="question-content" v-html="renderQuestionContent(question)"></div>
              <div class="answer-item">
                <label>你的答案：</label>
                <span>{{ question.studentAnswer || '未作答' }}</span>
              </div>
              <div class="answer-item">
                <label>参考答案：</label>
                <span>{{ getCorrectAnswer(question) }}</span>
              </div>
              <div v-if="question.checkDetail" class="answer-item">
                <label>批改意见：</label>
                <span>{{ question.checkDetail }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, onBeforeUnmount, toRef } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Check, Close } from '@element-plus/icons-vue'
import { getScoreDetail } from '@/api/th/score'
import * as echarts from 'echarts/core'
import { PieChart, BarChart } from 'echarts/charts'
import { LegendComponent, TooltipComponent, GridComponent, TitleComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { useUserStore } from '@/stores/modules/user-student'
import html2pdf from 'html2pdf.js'

// 注册必要的组件
echarts.use([
  PieChart, BarChart, LegendComponent, TooltipComponent,
  GridComponent, TitleComponent, CanvasRenderer
])

const route = useRoute()
const router = useRouter()
const examId = route.params.id

// 成绩图表 DOM 引用
const scoreDistributionChart = ref(null)
const correctRateChart = ref(null)

// 打印模板
const pdfScoreDistributionChart = ref(null)
const pdfCorrectRateChart = ref(null)

// 成绩详情数据
const scoreDetail = ref({
  id: null,
  examinationName: '',
  subjectName: '',
  examTime: '',
  totalScore: 0,
  score: 0,
  rank: null,
  bigQuestions: []
})

// 学生信息
const studentInfo = toRef(useUserStore().userInfo)
console.log(studentInfo.value.name)
console.log(studentInfo.value.account)
console.log(studentInfo.value.classInfo.name)

// 加载成绩详情
const loadScoreDetail = async () => {
  try {
    const { data } = await getScoreDetail(examId)
    scoreDetail.value = data

    // 初始化图表
    nextTick(() => {
      initCharts()
    })
  } catch (error) {
    console.error('获取成绩详情失败:', error)
    ElMessage.error('获取成绩详情失败')
  }
}

// 解析题目选项
const parseOptions = (contentStr) => {
  try {
    return JSON.parse(contentStr)
  } catch (e) {
    console.error('解析题目选项失败:', e)
    return {}
  }
}

// 渲染题目内容
const renderQuestionContent = (question) => {
  // 可以自定义题目的渲染方式
  return question.questionTypeId !== 1 && question.questionTypeId !== 2
    ? question.questionContent
    : '';
}

// 判断是否为正确选项
const isCorrectOption = (question, optionKey) => {
  // 获取正确答案
  const correctAnswer = getCorrectAnswer(question)

  if (question.questionTypeId === 1) { // 单选题
    return correctAnswer === optionKey
  } else if (question.questionTypeId === 2) { // 多选题
    return correctAnswer.split(',').includes(optionKey)
  }

  return false
}

// 判断是否为错误选项
const isWrongOption = (question, optionKey) => {
  const studentAnswer = question.studentAnswer || ''

  if (question.questionTypeId === 1) { // 单选题
    return studentAnswer === optionKey && !isCorrectOption(question, optionKey)
  } else if (question.questionTypeId === 2) { // 多选题
    return studentAnswer.split(',').includes(optionKey) && !isCorrectOption(question, optionKey)
  }

  return false
}

// 判断是否为学生选择的选项
const isSelectedOption = (question, optionKey) => {
  const studentAnswer = question.studentAnswer || ''

  if (question.questionTypeId === 1) { // 单选题
    return studentAnswer === optionKey
  } else if (question.questionTypeId === 2) { // 多选题
    return studentAnswer.split(',').includes(optionKey)
  }

  return false
}

// 获取正确答案
const getCorrectAnswer = (question) => {
  if (question.answer) {
    return question.answer
  }

  return '暂无参考答案'
}

// 获取大题总分
const getBigQuestionTotalScore = (bigQuestion) => {
  return bigQuestion.questions.reduce((total, q) => total + q.score, 0)
}

// 获取大题得分
const getBigQuestionScore = (bigQuestion) => {
  return bigQuestion.questions.reduce((total, q) => total + (q.finalScore || 0), 0)
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return 'N/A'

  const date = new Date(dateStr)
  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())} ${padZero(date.getHours())}:${padZero(date.getMinutes())}`
}

// 补零
const padZero = (num) => {
  return num < 10 ? `0${num}` : num
}

// 获取分数样式
const getScoreClass = (score, totalScore) => {
  const percentage = (score / totalScore) * 100

  if (percentage >= 90) return 'excellent'
  if (percentage >= 80) return 'good'
  if (percentage >= 60) return 'pass'
  return 'fail'
}

// 获取总题目数
const getTotalQuestionCount = () => {
  let total = 0
  scoreDetail.value.bigQuestions?.forEach(bq => {
    total += bq.questions.length
  })
  return total
}

// 获取答对题目数
const getCorrectQuestionCount = () => {
  let count = 0
  scoreDetail.value.bigQuestions?.forEach(bq => {
    bq.questions.forEach(q => {
      if (q.finalScore === q.score) count++
    })
  })
  return count
}

// 获取答错题目数
const getWrongQuestionCount = () => {
  let count = 0
  scoreDetail.value.bigQuestions?.forEach(bq => {
    bq.questions.forEach(q => {
      if (q.studentAnswer && q.finalScore !== q.score) count++
    })
  })
  return count
}

// 获取未答题目数
const getUnansweredQuestionCount = () => {
  let count = 0
  scoreDetail.value.bigQuestions?.forEach(bq => {
    bq.questions.forEach(q => {
      if (!q.studentAnswer) count++
    })
  })
  return count
}

// 获取客观题得分率
const getObjectiveScoreRate = () => {
  let totalScore = 0
  let earnedScore = 0

  scoreDetail.value.bigQuestions?.forEach(bq => {
    bq.questions.forEach(q => {
      if (q.answerTypeId === 2) { // 客观题
        totalScore += q.score
        earnedScore += q.finalScore || 0
      }
    })
  })

  return totalScore > 0 ? Math.round((earnedScore / totalScore) * 100) : 0
}

// 获取主观题得分率
const getSubjectiveScoreRate = () => {
  let totalScore = 0
  let earnedScore = 0

  scoreDetail.value.bigQuestions?.forEach(bq => {
    bq.questions.forEach(q => {
      if (q.answerTypeId === 1) { // 主观题
        totalScore += q.score
        earnedScore += q.finalScore || 0
      }
    })
  })

  return totalScore > 0 ? Math.round((earnedScore / totalScore) * 100) : 0
}

// 获取总得分率
const getTotalScoreRate = () => {
  return scoreDetail.value.totalScore > 0
    ? Math.round((scoreDetail.value.score / scoreDetail.value.totalScore) * 100)
    : 0
}

// 初始化图表
const initCharts = () => {
  // 确保DOM元素已经渲染并计算好尺寸
  nextTick(() => {
    // 主图表初始化逻辑（保持不变）
    initChartInstance(scoreDistributionChart.value, correctRateChart.value)
    // 打印图表初始化逻辑
    initChartInstance(pdfScoreDistributionChart.value, pdfCorrectRateChart.value)
  })
}

const initChartInstance = (distributionDom, rateDom) => {
  if (!distributionDom || !rateDom) return
  
  // 初始化得分分布图表
  const chart1 = echarts.init(distributionDom)
  chart1.setOption(createDistributionOption())

  // 初始化正确率图表
  const chart2 = echarts.init(rateDom)
  chart2.setOption(createRateOption())

  // 添加响应式逻辑
  const handleResize = () => {
    chart1.resize()
    chart2.resize()
  }
  
  // 使用ResizeObserver监听容器变化
  if (window.ResizeObserver) {
    const ro = new ResizeObserver(handleResize)
    ro.observe(distributionDom)
    ro.observe(rateDom)
  }
  
  // 窗口resize监听
  window.addEventListener('resize', handleResize)
  onBeforeUnmount(() => window.removeEventListener('resize', handleResize))
}

// 提取图表配置为独立方法
const createDistributionOption = () => ({
  title: {
    text: '得分分布',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [
        {
          value: getCorrectQuestionCount(),
          name: '答对题目',
          itemStyle: { color: '#67C23A' }
        },
        {
          value: getWrongQuestionCount(),
          name: '答错题目',
          itemStyle: { color: '#F56C6C' }
        },
        {
          value: getUnansweredQuestionCount(),
          name: '未答题目',
          itemStyle: { color: '#909399' }
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

const createRateOption = () => ({
  title: {
    text: '得分率分析',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: '{b}: {c}%'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    max: 100,
    axisLabel: {
      formatter: '{value}%'
    }
  },
  yAxis: {
    type: 'category',
    data: ['总体', '主观题', '客观题']
  },
  series: [
    {
      name: '得分率',
      type: 'bar',
      data: [
        {
          value: getTotalScoreRate(),
          itemStyle: { color: '#409EFF' }
        },
        {
          value: getSubjectiveScoreRate(),
          itemStyle: { color: '#E6A23C' }
        },
        {
          value: getObjectiveScoreRate(),
          itemStyle: { color: '#67C23A' }
        }
      ]
    }
  ]
})


// 返回列表
const goBack = () => {
  router.push('/score/list')
}


// 打印方法
const printScore = async () => {
  // 准备PDF选项
  const options = {
    margin: 10,
    filename: `${scoreDetail.value.examinationName}_成绩单.pdf`,
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2, logging: true },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
  }

  // 获取打印内容
  const element = document.getElementById('pdf-content')
  element.style.display = 'block'

  await nextTick()

  try {
    initChartInstance(pdfScoreDistributionChart.value, pdfCorrectRateChart.value)
    await new Promise(resolve => setTimeout(resolve, 500)) // 等待图表渲染
    // 生成PDF
    await html2pdf().set(options).from(element).save()
  } catch (error) {
    console.error('PDF生成失败:', error)
    ElMessage.error('PDF导出失败')
  } finally {
    element.style.display = 'none'
  }
}

onMounted(() => {
  loadScoreDetail()
})
</script>

<style scoped>
/* PDF打印样式 */
.pdf-container {
  padding: 20px;
  font-family: "汉仪正圆", "微软雅黑";
}

.pdf-header {
  text-align: center;
  margin-bottom: 30px;
}

.pdf-header h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.student-info {
  margin: 20px 0;
}

.info-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 10px 0;
}

.pdf-section {
  margin: 30px 0;
}

.pdf-section h2 {
  font-size: 18px;
  border-bottom: 2px solid #333;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.analysis-stats {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.stat-item {
  flex: 1;
  min-width: 200px;
  padding: 8px;
}

.big-question {
  margin: 25px 0;
}

.question {
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #ddd;
}

.question-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.options {
  margin-left: 20px;
}

.option {
  margin: 5px 0;
  padding: 5px;
}

.option.correct {
  color: #67C23A;
}

.option.wrong {
  color: #F56C6C;
}

.option.selected {
  font-weight: bold;
}

.answer-section {
  margin: 10px 0;
}

.answer-item {
  margin: 5px 0;
}

.answer-item label {
  font-weight: bold;
  margin-right: 10px;
}

/* 确保图表在打印时能正确显示 */
.chart {
  width: 100%;
  height: 300px;
  margin: 20px 0;
}


.score-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.paper-info {
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.paper-info h1 {
  margin: 0 0 16px;
  font-size: 24px;
  color: #303133;
  text-align: center;
}

.paper-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  margin: 8px 16px;
}

.label {
  font-weight: bold;
  color: #606266;
  margin-right: 8px;
}

.value {
  color: #303133;
}

.value.score {
  font-size: 20px;
  font-weight: bold;
}

.value.score.excellent {
  color: #67C23A;
}

.value.score.good {
  color: #409EFF;
}

.value.score.pass {
  color: #E6A23C;
}

.value.score.fail {
  color: #F56C6C;
}

.student-info {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e4e7ed;
}

.score-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
}

.big-question-section {
  margin-bottom: 32px;
}

.big-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 16px;
}

.big-question-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.big-question-score {
  font-size: 16px;
  color: #606266;
}

.big-question-score span {
  font-weight: bold;
  color: #409EFF;
}

.questions-list {
  margin-left: 16px;
}

.question-item {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.question-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.question-score {
  margin-left: 8px;
  color: #909399;
  font-weight: normal;
  font-size: 14px;
}

.question-content {
  margin-bottom: 16px;
  color: #606266;
}

.answer-section {
  padding: 16px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.option-item {
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  position: relative;
}

.option-item.correct {
  background-color: #f0f9eb;
  border-color: #67C23A;
  color: #67C23A;
}

.option-item.wrong {
  background-color: #fef0f0;
  border-color: #F56C6C;
  color: #F56C6C;
}

.option-item.selected {
  background-color: #f5f7fa;
  border-color: #909399;
}

.icon-right,
.icon-wrong {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.subjective-answer {
  padding: 8px;
}

.answer-row {
  margin-bottom: 12px;
  display: flex;
}

.answer-label {
  width: 100px;
  color: #606266;
  font-weight: bold;
}

.answer-content {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #f5f7fa;
  word-break: break-all;
}

.answer-content.correct {
  background-color: #f0f9eb;
  color: #67C23A;
}

.answer-content.check-detail {
  background-color: #f4f4f5;
  color: #606266;
}

.score-analysis {
  padding: 16px;
}

.analysis-charts {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.chart-container {
  flex: 1;
  min-width: 300px;
  text-align: center;
}

.chart-container h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #303133;
}

.chart {
  height: 300px;
  width: 100%;
}

.analysis-detail {
  margin-top: 24px;
}

.analysis-detail h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #303133;
}

.score-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px;
}

.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
  }

  .score-actions {
    display: none;
  }

  .el-tabs__header {
    display: none;
  }

  .el-tab-pane {
    display: block !important;
  }

  .score-detail-container {
    padding: 0;
  }

  .paper-info,
  .score-content,
  .exam-statistics {
    box-shadow: none;
    border: 1px solid #dcdfe6;
    margin-bottom: 20px;
  }

  .chart {
    height: 400px;
  }
}
</style>